<template>
    <!--    <div>-->
    <!--        <div class="switch-language">-->
    <!--            <el-dropdown size="large" :hide-timeout="50" placement="bottom-end" :hide-on-click="true">-->
    <!--                <Icon name="fa fa-globe" color="var(&#45;&#45;el-text-color-secondary)" size="28" />-->
    <!--                <template #dropdown>-->
    <!--                    <el-dropdown-menu class="chang-lang">-->
    <!--                        <el-dropdown-item v-for="item in config.lang.langArray" :key="item.name" @click="editDefaultLang(item.name)">-->
    <!--                            {{ item.value }}-->
    <!--                        </el-dropdown-item>-->
    <!--                    </el-dropdown-menu>-->
    <!--                </template>-->
    <!--            </el-dropdown>-->
    <!--        </div>-->
    <!--        <div @contextmenu.stop="" id="bubble" class="bubble">-->
    <!--            <canvas id="bubble-canvas" class="bubble-canvas"></canvas>-->
    <!--        </div>-->
    <!--        <div class="login">-->
    <!--            <div class="login-box">-->
    <!--                <div class="head">-->
    <!--                    <img src="~assets/login-header.png" alt="" />-->
    <!--                </div>-->
    <!--                <div class="form">-->
    <!--                    <img class="profile-avatar" :src="fullUrl('/static/images/avatar.png')" alt="" />-->
    <!--                    <div class="content">-->
    <!--                        <el-form @keyup.enter="onSubmitPre()" ref="formRef" :rules="rules" size="large" :model="form">-->
    <!--                            <el-form-item prop="username">-->
    <!--                                <el-input-->
    <!--                                    ref="usernameRef"-->
    <!--                                    type="text"-->
    <!--                                    clearable-->
    <!--                                    v-model="form.username"-->
    <!--                                    :placeholder="t('login.Please enter an account')"-->
    <!--                                >-->
    <!--                                    <template #prefix>-->
    <!--                                        <Icon name="fa fa-user" class="form-item-icon" size="16" color="var(&#45;&#45;el-input-icon-color)" />-->
    <!--                                    </template>-->
    <!--                                </el-input>-->
    <!--                            </el-form-item>-->
    <!--                            <el-form-item prop="password">-->
    <!--                                <el-input-->
    <!--                                    ref="passwordRef"-->
    <!--                                    v-model="form.password"-->
    <!--                                    type="password"-->
    <!--                                    :placeholder="t('login.Please input a password')"-->
    <!--                                    show-password-->
    <!--                                >-->
    <!--                                    <template #prefix>-->
    <!--                                        <Icon name="fa fa-unlock-alt" class="form-item-icon" size="16" color="var(&#45;&#45;el-input-icon-color)" />-->
    <!--                                    </template>-->
    <!--                                </el-input>-->
    <!--                            </el-form-item>-->
    <!--                            <el-checkbox v-model="form.keep" :label="t('login.Hold session')" size="default"></el-checkbox>-->
    <!--                            <el-form-item>-->
    <!--                                <el-button-->
    <!--                                    :loading="state.submitLoading"-->
    <!--                                    class="submit-button"-->
    <!--                                    round-->
    <!--                                    type="primary"-->
    <!--                                    size="large"-->
    <!--                                    @click="onSubmitPre()"-->
    <!--                                >-->
    <!--                                    {{ t('login.Sign in') }}-->
    <!--                                </el-button>-->
    <!--                            </el-form-item>-->
    <!--                        </el-form>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <div class="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
        <div class="mx-auto max-w-lg">
            <el-form class="mb-0 mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8" @keyup.enter="onSubmitPre()" ref="formRef" :rules="rules" size="large" :model="form">
                <p class="text-center text-lg font-medium">欢迎使用{{config_page.name}}，登录您的账号吧</p>

                <div>
                    <el-form-item prop="username">
                        <div class="w-full">
                            <label for="email" class="sr-only">手机号</label>
                            <div class="relative">
                                <input type="email"
                                       class="text-2xl font-bold transition ease-in-out  w-full rounded-lg border-indigo-600 p-4 pe-12 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                                       v-model="form.username" :placeholder="t('login.Please enter an account')" />
                                <span class="absolute inset-y-0 end-0 grid place-content-center px-4">
							<svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-gray-400" fill="none"
                                 viewBox="0 0 24 24" stroke="currentColor">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
							</svg>
						</span>
                            </div>
                        </div>
                    </el-form-item>
                </div>
                <el-form-item prop="password" class="!w-full">
                    <div class=" w-full">
                        <label for="password" class="sr-only">密码</label>
                        <div class="relative">
                            <input :type="!viewPassword ? 'password' : 'text'"
                                   class="text-2xl font-bold transition ease-in-out  w-full rounded-lg border-indigo-600 p-4 pe-12 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                                   :placeholder="t('login.Please input a password')" v-model="form.password" />

                            <span class="absolute inset-y-0 end-0 grid place-content-center px-4" @click="viewPassword = !viewPassword">
                                <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-gray-400" fill="none"
                                     viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                            </span>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item class="mt-4">
                    <el-button :loading="state.submitLoading"
                               class="block w-full rounded-lg bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 !border-none mt-4 hover:from-indigo-700 hover:to-pink-700 px-5 py-3 text-sm font-medium text-white"
                               size="large" type="primary" @click="onSubmitPre()">
                        {{ t('login.Sign in') }}
                    </el-button>
                </el-form-item>

                <p class="text-center text-sm text-gray-500">
                    忘记密码?
                    <a class="underline" href="#">联系管理员修改</a>
                </p>
<!--                <div>-->
<!--                    {{siteConfig}}-->
<!--                </div>-->

            </el-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, onBeforeUnmount, reactive, ref, nextTick } from 'vue'
import type { FormInstance, InputInstance } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { useConfig } from '/@/stores/config'
import { useAdminInfo } from '/@/stores/adminInfo'
import {index, login} from '/@/api/site'
import { uuid } from '/@/utils/random'

import router from '/@/router'
import clickCaptcha from '/@/components/clickCaptcha'
import toggleDark from '/@/utils/useDark'
import { fullUrl } from '/@/utils/common'
import { siteBaseRoutePath } from "/@/router/static/siteBase";
import {isEmpty} from "lodash-es";
import {getFirstRoute, handleSiteRoute, routePush} from "/@/utils/router";

const viewPassword = ref(false)
const config = useConfig()
const adminInfo = useAdminInfo()
const siteConfig = ref({
    app_type: "",
    contact_mobile: "",
    contact_person: "",
    create_time: null,
    desc: "",
    domain: "",
    expire_time: null,
    logo: "",
    name: "",
    organize_name: "",
    site_group_id: null,
    site_id: null,
    status: ""
})
toggleDark(config.layout.isDark)

const formRef = ref<FormInstance>()
const usernameRef = ref<InputInstance>()
const passwordRef = ref<InputInstance>()
const state = reactive({
    showCaptcha: false,
    submitLoading: false,
})
const form = reactive({
    username: '',
    password: '',
    keep: false,
    captchaId: uuid(),
    captchaInfo: '',
})
const config_page = ref({
    name:"",
    organize_name:""
})
const { t } = useI18n()

// 表单验证规则
const rules = reactive({
    username: [{
        required: true,
        message: t('login.Please enter an account'),
        trigger: 'blur'
    }],
    password: [{
        required: true,
        message: t('login.Please input a password'),
        trigger: 'blur'
    }],
})



onMounted(() => {
    login('get')
        .then((res) => {
            state.showCaptcha = res.data.captcha
            config_page.value.name = res.data.site_info.name
            config_page.value.organize_name = res.data.site_info.organize_name
            siteConfig.value = res.data.site_info
        })
        .catch((err) => {
            console.log(err)
        })
})



const onSubmitPre = async () => {
    try {
        await formRef.value?.validate()
        if (state.showCaptcha) {
            clickCaptcha(form.captchaId, (captchaInfo : string) => onSubmit(captchaInfo))
        } else {
            onSubmit()
        }
    }catch (e){
        console.log(e)
    }
}
const onSubmit = (captchaInfo = '') => {
    state.submitLoading = true
    form.captchaInfo = captchaInfo
    login('post', form)
        .then((res) => {
            adminInfo.dataFill(res.data.userInfo)
            router.push({ path: siteBaseRoutePath  })
        })
        .finally(() => {
            state.submitLoading = false
        })
}
</script>
